import React, { PureComponent } from "react";
import { connect } from "dva";
import { Map } from 'react-amap';
import { getConfig } from '../../../config';

const config = getConfig();
const mapKey = config.mapKey;


@connect(({ dashboard,loading }) => ({
  // dictionaries:global.dictionaries,
  mapData:dashboard.mapData,
  loading: loading.models.dashboard,
}))

class UIMarker extends React.Component {
  constructor() {
    super();
    // this.loadUI();
  }

  componentDidMount() {
    this.timerID = setTimeout(
      () => this.loadUI(),
      200
    );

  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  loadUI() {
    window.AMapUI.loadUI(['overlay/SimpleMarker'], (SimpleMarker) => {
      this.initPage(SimpleMarker);
    })
  }

  initPage(SimpleMarker) {
    const map = this.props.__map__;
    const { mapData, dictionaries } =this.props;

    // const repairStatus = dictionaries.repairStatus && dictionaries.repairStatus.length>1
    //   ? dictionaries.repairStatus.map(item=>item.label)
    //   :[];

    // const colors=['red','darkblue','black','darkyellow','orange'];
    const colors=['purple','yellow','darkblue','darkyellow','orange'];


    mapData.forEach(function (item) {
      if(item.longitude && item.latitude){
        new SimpleMarker({
          iconLabel: {
            innerHTML: item.pointName, //设置文字内容
            style: {
              color: '#000', //设置文字颜色
              fontSize:12
            }
          },
          iconTheme: 'fresh',
          iconStyle: item.status ? colors[parseInt(item.status)-1] : 'darkblue' ,
          map: map,
          position: [item.longitude, item.latitude]
        });
      }
    });


    // new SimpleMarker({
    //   //前景文字
    //   iconLabel: 'A',
    //   //图标主题
    //   // iconTheme: 'default',
    //   //背景图标样式
    //   iconStyle: 'red',
    //   //...其他Marker选项...，不包括content
    //   map: map,
    //   position: [120, 31]
    // });
    //
    // //创建SimpleMarker实例
    // new SimpleMarker({
    //   //前景文字
    //   iconLabel: {
    //     innerHTML: '<i>B</i>', //设置文字内容
    //     style: {
    //       color: '#fff' //设置文字颜色
    //     }
    //   },
    //   //图标主题
    //   // iconTheme: 'fresh',
    //   //背景图标样式
    //   iconStyle: 'blue',
    //   //...其他Marker选项...，不包括content
    //   map: map,
    //   position: [120, 30]
    // });
  }

  render() {
    return null;
  }
}


const initCallback = () => {
  console.log("AMapUI Loaded Done")
}


export default class Maps extends PureComponent {
  constructor(props) {
    super(props);

  }

  componentDidMount() {

  }


  render() {
    const { mapData } =this.props;
    const plugins = [
      // 'MapType',
      'Scale',
      // 'OverView',
      // 'ControlBar', // v1.1.0 新增
      {
        name: 'ToolBar',
        options: {
          visible: true,  // 不设置该属性默认就是 true
        },
      }
    ]
    return (
      <div style={{height:'100%',width:'100%'}}>
        <Map amapkey={mapKey}
             zoom={14}
             useAMapUI={initCallback}
             plugins={plugins}
        >
          <UIMarker mapData={mapData}
                    // dictionaries={dictionaries}
          />
        </Map>
      </div>
    );
  }
}

